import styled from '@emotion/styled';
import React, { useEffect, useRef } from 'react';
import { Empty } from 'antd';
import ComparisonView from './ComparisonView';
import CustomerImages from './CustomerImages';
import GetGeoLocation from './GetGeoLocaltion';
import GetHandWriting from './GetHandWriting';
import ScanCode from './ScanCode';
import FillForm from './FillForm';
import { BusinessTaskMap, IBusinessStatus } from '../Context/BusinessContext';
import { updateFormRecord } from '@/api';
import useSyncState from '../hooks/useSyncState';
import CardOcr from './CardOcr';
import TranscriptDetail from './TranscriptDetail';
import CollectionVariableDetail from './CollectionVariableDetail';
import { ICollectionVariable } from '@/modules/interface';
import AgentService from '@/modules/Agent';
import VideoCollectionDetail from './VideoCollectionDetail';
import { useTranslation } from 'react-i18next';

interface BusinessContentProps {
	businessData?: any;
	height: number;
}

const BusinessContainer = styled.div`
	max-height: ${(props: { showQualityTestingResultView: boolean | undefined; height: number | undefined; type: string }) => props.height + 'px'};
	overflow-y: auto;
	height: ${(props: { height: number | undefined }) => props.height + 'px'};
`;

const ResultContainer = styled.div`
	padding: 10px;
`;

const BusinessContent = (props: BusinessContentProps) => {
	const { t } = useTranslation();
	const { businessData, height } = props;

	const [components, setComponents] = useSyncState<any>(null);

	useEffect(() => {
		if (businessData) {
			setComponents(getModal());
		}
	}, [businessData]);

	const getModal = () => {
		console.log(businessData, 'businessData');
		if (businessData && businessData.type) {
			return getDetail(businessData.type);
		}
	};

	const getDetail = (type: string) => {
		switch (type) {
			case 'screenshot':
				if (businessData.response.data.url) {
					return <CustomerImages url={businessData.response.data.url} userRole={businessData.userRole} />;
				} else {
					return <div style={{ margin: '20px' }}>截图超时失败，请重试！</div>;
				}
			// return <CustomerImages url={businessData.response.data.url} userRole={businessData.userRole} />;
			case 'snapShot':
				return <CustomerImages url={businessData.response.data.url} userRole={businessData.userRole} />;
			case 'faceCompare':
				return <ComparisonView faceUrl={businessData.response.imageUrl} userRole={businessData.userRole} type={businessData.type} result={businessData.response.result} />;
			case 'getGeoLocaltion':
				return (
					<GetGeoLocation
						status={businessData.response.status}
						location={businessData.response.status === 'done' ? businessData.response.data.position : {}}
						userRole={businessData.userRole}
						reason={businessData.response.data.reason}
						address={businessData.response.data.address || ''}
						id={businessData.response.id}
					/>
				);
			case 'cardCompare':
				return (
					<ComparisonView
						faceUrl={businessData.response.imageUrl}
						userRole={businessData.userRole}
						type={businessData.type}
						reason={businessData.response.data.reason}
						result={businessData.response.result}
					/>
				);
			case 'sendSign':
				return (
					<GetHandWriting
						img={businessData.response.data && businessData.response.data.pic ? businessData.response.data.pic : ''}
						userRole={businessData.userRole}
						status={businessData.response.status}
					/>
				);
			case 'sendScannerCode':
				return <ScanCode code={businessData.response.data.code ? businessData.response.data.code : ''} userRole={businessData.userRole} />;
			case 'fillForm':
				const data = BusinessTaskMap.getFormListWithClientId(businessData.clientId);
				AgentService.getClientForms(businessData.clientId);
				console.log(AgentService.getClientForms(businessData.clientId), 'getFormListWithClientId');

				return data.length === 0 ? null : <FillForm formData={AgentService.getClientForms(businessData.clientId)} clentId={businessData.clientId} userRole={businessData.userRole} />;
			case 'sendIdCardCollection':
				return <CardOcr images={businessData.response.data?.urls} cardType="idCard" id={businessData.value} userRole={businessData.userRole} clientId={businessData.clientId} />;
			case 'sendBankCardCollection':
				return <CardOcr images={businessData.response.data?.urls} cardType="bankCard" id={businessData.response.id} userRole={businessData.userRole} clientId={businessData.clientId} />;
			case 'transcriptOfTestimony':
				return <TranscriptDetail data={businessData.response.data} userRole={businessData.userRole} />;
			case 'sendVideoCollection':
				return <VideoCollectionDetail data={businessData.response.data} userRole={businessData.userRole} />;
			case 'sendVariableCollection':
				return VariableCollectionResult;
			default:
				break;
		}
	};

	const VariableCollectionResult = (
		<ResultContainer>
			<span>信息收集结果: </span>
			<span>{businessData.response.status === 'done' ? '成功' : businessData.response.status === 'rejected' ? '访客拒绝' : '失败'}</span>
		</ResultContainer>
	);

	return (
		<BusinessContainer showQualityTestingResultView={!AgentService.configure.preferenceSettings.qualityTestingResultHidden} type={props.businessData.type} height={height}>
			{components()}
			{AgentService.responseVariabelData.map((item, index) => {
				return <CollectionVariableDetail key={index} data={item.data} userName={item.userName} clientId={item.clientId} userRole={item.userRole}></CollectionVariableDetail>;
			})}
		</BusinessContainer>
	);
};

export default BusinessContent;
